<template>
  <TableCom :data="data" :columns="columns" :loading="loading" />
</template>
<script setup>
import TableCom from "@/components/List/tableCom.vue"
const loading = ref(false)
const columns = reactive([
  {
    title: "#",
    key: "index",
    align: "center",
    customRender: ({index}) => index + 1,
    width: "10px",
  },
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    align: "center",
    width: "50px",

  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: "100px", align: "center",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: "100px", align: "center",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    width: "100px", align: "center",
  }
]);
const data = reactive([]);
for (let i = 0; i < 100; i++) {
  data.push({
    id: i,
    key: i,
    name: "John Brown",
    age: i + 1,
    address: `New York No. ${i + 1} Lake Park`,
  });
}
onMounted(() => {
 loading.value = true;
 setTimeout(() => {
  loading.value = false;
 }, 1000);
});
</script>
<style scoped lang="scss">

</style>